<template>
	<v-container fill-height fluid grid-list-xl>
		<v-layout justify-center wrap>
			<v-flex xs12 md12>
				<v-data-table :headers="headers" :items="desserts">
					<template v-slot:items="props">
						<td>{{ props.item.id }}</td>
						<td>{{ props.item.name }}</td>
						<td>{{ props.item.path }}</td>
					</template>
				</v-data-table>
			</v-flex>
		</v-layout>

	</v-container>
</template>
<script>
	import axios from '@/utils/http'
	import util from '@/utils/utils'
	import path from '@/paths/role'
	export default {
		data() {
			return {
				headers: [{
						text: 'id',
						value: 'id'
					},
					{
						text: 'name',
						value: 'name'
					},
					{
						text: 'path',
						value: 'path'
					}
				],
				desserts: []
			}
		},
		mounted() {
			this.page()
		},
		methods: {
			page: async function() {
				try {
					const result = await axios.postRequest(util.appendPage(path.PATH_ROLE_PAGE, 1, 2));
					this.desserts = result.data.data.records;
				} catch(e) {
					console.log(e);

				}
			}
		}
	}
</script>
